<template>
	<view style="background-color: #fff;padding-top: 1upx;">
		<!-- <view style="padding: 30upx;background-color: #fff;font-size: 36upx;font-weight: 900;
			color: #555;margin: 2upx 0 20upx;">{{detail.planName}}</view> -->
		<!-- <view style="padding: 40upx;background-color: #fff;margin: 0 0 20upx;">
			<view style="margin-bottom: 20upx;">
				<u-tag text="计划名称" type="success" style="background-color: #18C7E1;color: #fff;"/>
			</view>
			<view style="text-indent: 50upx;font-size: 32upx;line-height: 50upx;">{{detail.planName}}</view>
		</view> -->
		<view class="title">
			<text class="txt">产检名称</text>
		</view>
		<view class="art">{{detail.planName}}</view>
		<view class="title">
			<text class="txt">产检目的</text>
		</view>
		<view class="art">{{detail.planGoal}}</view>
		<!-- 开关 -->
		<view class="title">
			<text class="txt">产检状态</text>
		</view>
		<view class="art">
			<view class="flex flex-j-b flex-al-c uni-item-line" style="padding: 20upx 0;">
				<view>是否完成</view>
				<u-switch v-model="checked1" -->
					active-color="#18C7E1" inactive-color="#eee"></u-switch>
			</view>
			<view class="flex flex-j-b flex-al-c uni-item-line" style="padding: 20upx 0;">
				<view>是否上传</view>
				<u-switch v-model="checked2"
					active-color="#18C7E1" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<view class="title">
			<text class="txt">产检时间</text>
		</view>
		<view class="art">{{detail.planTime}}</view>
		<view class="title">
			<text class="txt">产前准备</text>
		</view>
		<view class="art" v-html="detail.planReady"></view>
		<view class="title">
			<text class="txt">备注</text>
		</view>
		<view class="art" v-html="detail.planRemark"></view>
		
		<view style="margin: 20upx 20upx;">
			<u-button type="primary" style="background: #24D5EA;"
				@tap="yuyueCheck">预约</u-button>
		</view>
		
		<!-- 底部弹出层
		<u-popup v-model="popup" mode="bottom">
			<view>
				<!-- 人生若只如初见，何事秋风悲画扇 -->
				<view class="inp-group flex flex-al-c">
					<view class="inp-title">身高(CM)</view>
					<u-input v-model="child.height" type="text" :border="true" placeholder="请输入身高"/>
				</view>
				<view class="inp-group flex flex-al-c">
					<view class="inp-title">体重(KG)</view>
					<u-input v-model="child.weight" type="text" :border="true" placeholder="请输入体重"/>
				</view>
				<view class="inp-group flex flex-al-c" v-if="config.globalData.user.age<=3">
					<view class="inp-title">头围</view>
					<u-input v-model="child.headCircumference" type="text" :border="true" placeholder="请输入头围"/>
				</view>
				<view class="inp-group flex flex-al-c" v-if="config.globalData.user.age>3">
					<view class="inp-title">视力</view>
					<u-input v-model="child.vision" type="text" :border="true" placeholder="请输入视力"/>
				</view>
				<view class="inp-group flex flex-al-c">
					<view class="inp-title">是否异常</view>
					<u-switch v-model="checked2" @change="checked2Change"
						active-color="#18C7E1" inactive-color="#eee"></u-switch>
				</view>
				<view class="inp-group flex flex-al-c" v-if="showRemarkNote">
					<view class="inp-title">异常说明</view>
					<u-input v-model="child.vision" type="textarea" :border="true" placeholder="请输入异常说明"/>
				</view>
				
				<view style="width: 90%;margin: 50upx auto 50upx;">
					<button type="default" style="background: #18C7E1;color: #fff;" 
						@tap="subUserInfo">保存</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      detail: {},

      checked1: false,
      popup: false,

      checked2: false,
      showRemarkNote: false,

      child: {
        height: "",
        weight: "",
        headCircumference: "", // 头围
        vision: "", // 视力
        checkWarn: "", // 是否异常
        remarkNote: "", // 异常说明
      },
    };
  },
  watch: {
    popup(newv) {
      if (!newv) {
        this.getPlanDetail();
      }
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.getPlanDetail();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getPlanDetail() {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get(
          "/agency/planGravidPrenatalCheck/getPlanGravidPrenatalCheckByPlanId",
          { planId: this.id }
        )
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.detail = res.data.data;
            if (res.data.data.check_type == "1") {
              self.checked1 = true;
            } else {
              self.checked1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 点击是否完成
    checked1Change() {
      //console.log('kkkk')
      if (this.checked1) {
        this.popup = true;
      }
    },
    // 点击是否异常
    checked2Change() {
      if (this.checked2) {
        this.showRemarkNote = true;
      } else {
        this.showRemarkNote = false;
      }
    },
    valid() {
      if (!this.child.height) return false;
      if (!this.child.weight) return false;
      if (this.config.globalData.user.age <= 3 && !this.child.headCircumference)
        return false;
      if (this.config.globalData.user.age > 3 && !this.child.vision)
        return false;
      return true;
    },
    subUserInfo() {
      if (!this.valid()) return;
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/childrenInfo/childHealthCheckRecord", {
          height: this.child.height,
          weight: this.child.weight,
          headCircumference: this.child.headCircumference,
          vision: this.child.vision,
          checkType: this.checked1 ? "1" : "0",
          checkWarn: this.checked2 ? "1" : "0",
          remarkNote: this.child.remarkNote,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.popup = false;
            self.getPlanDetail();
            setTimeout((s) => {
              uni.showToast({ title: res.data.msg, icon: "none" });
            }, 500);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 预约产检
    yuyueCheck() {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/agency/planGravidPrenatalCheck/agencyPlanChrInoculation", {
          id: this.id,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            uni.showToast({ title: res.data.msg });
            self.getPlanDetail();
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;
  .inp-title {
    width: 200upx;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;
  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}
.art {
  padding: 30upx 50upx;
  line-height: 46upx;
}
</style>
